<template name="settings">
    {{> pageHeading title="Settings" }}

    <div class="wrapper wrapper-content animated fadeIn">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>Application Settings
                            <small class="m-l-sm">Specify application settings</small>
                        </h5>
                    </div>
                    <div class="ibox-content">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-lg-3 control-label">Max allowed fetch size for FIND query</label>
                                <div class="col-lg-9">
                                    <div class="input-group m-b">
                                        <input id="inputMaxAllowedFetchSize" min="0" required="true" type="number"
                                               class="form-control">
                                        <span class="input-group-addon"> MB</span>
                                    </div>
                                    <span class="help-block m-b-none">
                                        <strong>0</strong> = Infinite. This only works if you are <strong>NOT</strong> using <strong>project</strong> option
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">Socket timeout</label>
                                <div class="col-lg-9">
                                    <div class="input-group m-b">
                                        <input id="inputSocketTimeout" min="0" required="true" type="number"
                                               class="form-control">
                                        <span class="input-group-addon"> Seconds</span>
                                    </div>
                                    <span class="help-block m-b-none">
                                        <strong>0</strong> = Infinite.
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">Connection timeout</label>
                                <div class="col-lg-9">
                                    <div class="input-group m-b">
                                        <input id="inputConnectionTimeout" min="0" required="true" type="number"
                                               class="form-control">
                                        <span class="input-group-addon"> Seconds</span>
                                    </div>
                                    <span class="help-block m-b-none">
                                        <strong>0</strong> = Infinite.
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">Database statistics scheduler</label>
                                <div class="col-lg-9">
                                    <div class="input-group m-b">
                                        <input id="inputDBStatsScheduler" min="2000" required="true"
                                               type="number"
                                               class="form-control">
                                        <span class="input-group-addon"> Milliseconds</span>
                                    </div>
                                    <span class="help-block m-b-none">
                                        Every <strong>configured milliseconds</strong> mongoclient populates statistic charts via querying database.
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">Size information in</label>
                                <div class="col-lg-9">
                                    <select id="cmbScale"
                                            data-placeholder="Choose one..."
                                            class="chosen-select form-control"
                                            tabindex="-1">
                                        <option>MegaBytes</option>
                                        <option>KiloBytes</option>
                                        <option>Bytes</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">Default result view</label>
                                <div class="col-lg-9">
                                    <select id="cmbResultView"
                                            data-placeholder="Choose one..."
                                            class="chosen-select form-control"
                                            tabindex="-1">
                                        <option>Jsoneditor</option>
                                        <option>Aceeditor</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">Autocomplete feature for selectors</label>
                                <div class="col-lg-9">
                                    <div id="divAutoCompleteFields" class="i-checks">
                                        <input id="inputAutoCompleteFields" type="checkbox" value=""
                                               class="form-control"
                                               checked=""
                                               style="position: absolute; opacity: 0;"/>
                                        <span class="help-block m-b-none">Enabling this feature significantly reduces performance on huge collections</span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">Show live chat</label>
                                <div class="col-lg-9">
                                    <div id="divShowLiveChat" class="i-checks">
                                        <input id="inputShowLiveChat" type="checkbox" value=""
                                               class="form-control"
                                               checked=""
                                               style="position: absolute; opacity: 0;"/>
                                        <span class="help-block m-b-none">
                                            In case, you're uncomfortable with live chat button you can disable it from here. <b>Requires restart</b>
                                         </span>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label">Show database statistics</label>
                                <div class="col-lg-9">
                                    <div id="divShowDBStats" class="i-checks">
                                        <input id="inputShowDBStats" type="checkbox" value=""
                                               class="form-control"
                                               checked=""
                                               style="position: absolute; opacity: 0;"/>
                                        <span class="help-block m-b-none">
                                         To prevent querying database at regular intervals for statistics, you can <strong>disable</strong> this feature
                                         </span>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">Local dump path</label>
                                <div class="col-lg-9">
                                    <input id="inputDumpPath" required="true" type="text"
                                           class="form-control">
                                    <span class="help-block m-b-none">
                                         Database <strong>dumps</strong> will be placed under this directory
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-lg-12">
                                    <button id="btnSaveSettings"
                                            class="btn btn-block btn-outline btn-primary ladda-button"
                                            type="button"
                                            data-style="contract">
                                        <strong>Save</strong></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>